import React, { useCallback, useEffect, useState } from 'react'
import { Image, Text, View } from '@tarojs/components'
import { date } from '@pier88health/p8h-common'
import Taro from '@tarojs/taro'
import { STORAGE_KEY } from '@CONSTANTS/common'
import Images from '@ASSET/Images'
import i18n from '@I18N'
import style from './PlanCompleteModal.module.scss'
interface Props {
  doneForTodayFlag?: boolean
}
const PlanCompleteModal: React.FC<Props> = ({ doneForTodayFlag = false }) => {
  const [visible, setVisible] = useState(false)
  useEffect(() => {
    const lastData = Taro.getStorageSync(STORAGE_KEY.plan_com_modal_key)
    const currentData = date.dateFormat(new Date().getTime(), 'yyyy.MM.dd')
    if (!doneForTodayFlag) return
    if (lastData === currentData) return
    Taro.setStorageSync(STORAGE_KEY.plan_com_modal_key, currentData)
    setVisible(true)
  }, [doneForTodayFlag])
  const onClickClose = useCallback(() => {
    setVisible(false)
  }, [])
  if (!visible) return null
  return (
    <View className={style.modal}>
      <View className={style.content}>
        <Image src={Images.managePlan.bg_plan_modal} className={style.headerImage} />
        <Text className={style.title}>{i18n.plan.plan_complete_tip_title()}</Text>
        <View className={style.descContainer}>
          <Text className={style.desc}>{i18n.plan.plan_complete_tip_desc()}</Text>
        </View>
      </View>
      <View onClick={onClickClose}>
        <Image src={Images.home.white_close} className={style.closeIcon} mode="aspectFit" />
      </View>
    </View>
  )
}

export default PlanCompleteModal
